<template>
  <div class="main-container-app">
    <el-row class="form-contain" >
      <lot-fee-form @handleQueryLotFee="handleQueryLotFee"></lot-fee-form>
    </el-row>
    <div class="table-contain">
    <lot-fee-table :searchList="lotFeeRes" :listLoadingLotFee="loading" @handleCurrentChangeLotFee="handleCurrentChangeLotFee"
    @handleSizeChangeLotFee="handleSizeChangeLotFee"></lot-fee-table>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import LotFeeForm from "./lotFeeChild/lotFeeForm";
  import LotFeeTable from "./lotFeeChild/LotFeeTable";
  import {fetchListLotFee} from "../../api/assessment/lotFee";

  export default {
    components: {
      LotFeeTable,
      LotFeeForm},
    data(){
      return{
        lotFeeRes:null,
        loading:false,
        queryData:'',
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      handleQueryLotFee(val){
        this.queryData=val
        this.listQuery.page=1
        this.listQuery.limit=20
        this.getDataListLotFee()
      },
      handleSizeChangeLotFee(val){
        this.listQuery.limit=val
        this.listQuery.page = 1
        this.getDataListLotFee()
      },
      handleCurrentChangeLotFee(val){
        this.listQuery.page=val
        this.getDataListLotFee()
      },
      getDataListLotFee(){
        this.loading=true
        fetchListLotFee(this.listQuery,this.queryData).then(res =>{
          this.lotFeeRes=res
          console.log(res)
          this.loading=false
        },err=>{
          this.loading=false
        })
      }

    }
  }
</script>

<style scoped>
  /*.lotFee {*/
    /*padding: 32px;*/
    /*background-color: rgb(240, 242, 245);*/
  /*}*/
</style>
